<template>
  <div v-if="Object.keys(detailimg).length !== 0" class="detailimginfo">
    <div class="desc">
      <div>●———————————</div>
      <div class="text">{{ detailimg.desc }}</div>
      <div>———————————●</div>
    </div>
    <div class="imgkey">{{ detailimg.detailImage[0].key }}</div>
    <div class="imglist">
      <img
        v-for="(item, index) in detailimg.detailImage[0].list"
        :key="index"
        :src="item"
        alt=""
        @load="imgLoad"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailImgInfo",
  props: {
    detailimg: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      counter: 0,
      imagesLength: 0,
    };
  },
  methods: {
    imgLoad() {
      // 判断, 所有的图片都加载完了, 那么进行一次回调就可以了.
      //if判断也可去掉，因为在detail.vue的imageLoad中已使用防抖函数
      if (++this.counter === this.imagesLength) {
        this.$emit("imageLoad");
      }
    },
  },
  watch: {
	    detailimg() {
	      // 获取图片的个数
	    	this.imagesLength = this.detailimg.detailImage[0].list.length
	    }
    },
  components: {},
};
</script>

<style  scoped>
.detailimginfo {
  padding: 30px 10px;
  border-bottom: 5px solid #ccc;
}
.detailimginfo img {
  width: 100%;
}
.desc {
  font-size: 12px;
  padding: 10px 10px;
}
.desc div:first-child {
  text-align: left;
}
.desc div:last-child {
  text-align: right;
}
.text {
  margin: 10px 0px;
}
.imgkey {
  font-size: 14px;
  color: black;
  margin: 20px 0px;
}
</style>
